<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>HXBlog_V2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link href="./images/blog.ico" rel="icon" type="image/x-icon"/>
    <link href="./css/style.css" rel="stylesheet"/>
    <link href="./css/mystyle.css" rel="stylesheet"/>
    <link href="./css/animate.min.css" rel="stylesheet"/>
    <link href="./css/bootstrap.css" rel="stylesheet"/>
    <link href="./css/dropdown.css" rel="stylesheet"/>
    <link href="./css/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
    <link href="./css/jquery.emoji.css" rel="stylesheet"/>
    <link href="./css/upprise.css" rel="stylesheet"/>
    <style rel="stylesheet" >
        .taogongzai {
            display: inline-block;
            vertical-align: middle;
            margin-right: 40px;
            width: 80px;
            height: 90px;
            background: url(//img.alicdn.com/tps/i1/T1ocbJXjxiXXXZPI3b-100-270.png) no-repeat 0 0;
        }
        .item-not-found {
            display: inline-block;
            vertical-align: middle;
            text-align: left;
            line-height: 30px;
        }
    </style>

    <!-- common imports -->
    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./js/wow.min.js"></script>
    <script type="text/javascript" src="./js/jquery.svg3dtagcloud.min.js"></script>
    <script type="text/javascript" src="./js/modernizr.custom.js" ></script>
    <script type="text/javascript" src="./js/jquery.emoji.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/jquery.dropdown.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./layer/layer.js"></script>
    <script type="text/javascript" src="./myJs/commonImport.js"></script>
    <script type="text/javascript" src="../myJs/md5.js"></script>
    <script type="text/javascript" src="../myJs/stringBuilder.js"></script>
    <script type="text/javascript" src="../myJs/constants.js"></script>
    <script type="text/javascript" src="../myJs/utils.js"></script>
    <script type="text/javascript" src="./myJs/headerFooter.js"></script>
    <script type="text/javascript" src="./myJs/blogList.js"></script>
    <script type="text/javascript">
        importCss()
        $(document).ready(function () {
            importHeaderFooter()
            importJs()
            headerFooterInit()
            contentInit()
        })
    </script>

</head>
<body>
    <div id="topEle"></div>

    <div class="header" id="headerNav"></div><!--头部导航结束-->

    <div class="header-bottom" id="bannerNav"></div><!--博客标题结束-->
    <div class="banner-1"
         style="background: url(./images/background.jpg) no-repeat 0px 0px;background-size: 100%">
    </div>

    <div class="container">
        <div id="bodyContent" class="col-md-9 technology-left">
            <div class="col-md-9 technology-left" v-if="blogs.length == 0">
                <div class="inner">
                    <div class="taogongzai"></div>
                    <div class="item-not-found">
                        <div>没有找到与 "
                            <span class="h">
                            {{params.typeName}} {{params.tagName}} {{params.keywords}}
                        </span>" 相关的博客
                        </div>
                    </div>

                </div>
            </div>

            <div class="tech-no" >
                <div v-for="blog in blogs" >
                <div class="wthree">
                    <div class="col-md-6 wthree-left wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s"
                         style="width: 250px;height: 250px;">
                        <div class="tch-img">
                            <a :href="'/static/main/blogDetail.html?id=' + blog.id">
                                <img :src="blog.coverUrl" class="img-responsive" :alt="blog.author">
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6 wthree-right wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                        <h6>
                            <img :src="blog.blogCreateTypeImgUrl" />
                            <a :href="'/static/main/blogDetail.html?id=' + blog.id">{{blog.title}}</a>
                        </h6>
                        <h6> by <a> {{blog.author}} </a>
                            <span> {{blog.createdAt}} </span></h6>
                        <p class="summary"> {{blog.summary}} </p>
                        <div class="bht1">
                            <a :href="'/static/main/blogDetail.html?id=' + blog.id">查看更多</a>
                        </div>
                        <div class="soci">
                            <p>
                                <a class="span_link">
                                    <span class="glyphicon glyphicon-comment"></span>
                                    <span> {{blog.commentCnt}} </span>
                                </a>
                                <a class="span_link">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    <span> {{blog.viewCnt}} </span>
                                </a>
                            </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                </div>

                <nav class="paging wow fadeInDown" data-wow-duration=".5s" data-wow-delay=".2s"
                     style="text-align: center" v-if="pagination.length > 3" >
                    <ul class="pagination pagination-mg" >
                        <li v-for="page in pagination" :class="page.active">
                            <a :href="page.pageUrl">{{page.pageNo}}</a>
                        </li>
                    </ul>
                </nav> <!--分页结束-->
            </div>
        </div><!--左侧内容结束-->

        <div name="header">
            <div class="col-md-3 technology-right" id="rightNav"></div><!--右侧内容结束-->
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="footer" id="footerNav"></div><!--尾部结束-->
    <div class="copyright wow fadeInDown" id="copyrightNav" data-wow-duration=".8s" data-wow-delay=".2s"></div><!--版权区结束-->

    <img id="xiaolongbao" src="./images/xiaolongbao.gif"/>

</body>
</html>